<template>
  <view class="container">
    <!-- Header with title -->
    <view class="header">
      <text class="system-name">ERP多店铺统计</text>
    </view>

    <!-- 店铺统计列表 -->
    <view class="store-stats-list">
      <view v-for="store in stores" :key="store.id" class="store-card">
        <view class="store-header">
          <text class="store-name">{{ store.name }}</text>
          <view class="store-buttons">
            <uni-button type="default" size="mini" @click="viewDetails(store)">查看详情</uni-button>
          </view>
        </view>
        <view class="store-stats">
          <view class="stat-item">
            <text class="stat-label">销售额：</text>
            <text class="stat-value">{{ store.sales }}</text>
          </view>
          <view class="stat-item">
            <text class="stat-label">会员数量：</text>
            <text class="stat-value">{{ store.members }}</text>
          </view>
          <view class="stat-item">
            <text class="stat-label">今日订单：</text>
            <text class="stat-value">{{ store.todayOrders }}</text>
          </view>
          <view class="stat-item">
            <text class="stat-label">昨日订单：</text>
            <text class="stat-value">{{ store.yesterdayOrders }}</text>
          </view>
          <view class="stat-item">
            <text class="stat-label">本周订单：</text>
            <text class="stat-value">{{ store.weekOrders }}</text>
          </view>
          <view class="stat-item">
            <text class="stat-label">本月订单：</text>
            <text class="stat-value">{{ store.monthOrders }}</text>
          </view>
          <!-- 添加其他统计项 -->
          <view class="stat-item">
            <text class="stat-label">库存：</text>
            <text class="stat-value">{{ store.stock }}</text>
          </view>
          <view class="stat-item">
            <text class="stat-label">退货率：</text>
            <text class="stat-value">{{ store.returnRate }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 详情弹窗 -->
    <uni-popup ref="detailsPopup" type="center">
      <view class="popup-container">
        <h3>店铺详情</h3>
        <view class="form-row" v-for="(value, key) in currentStoreDetails" :key="key">
          <label>{{ key }}：</label>
          <text>{{ value }}</text>
        </view>
        <view class="button-group">
          <uni-button type="default" size="small" @click="closePopup">关闭</uni-button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      stores: [
        {
          id: 1,
          name: '店铺 A',
          sales: '¥100,000',
          members: 150,
          todayOrders: 30,
          yesterdayOrders: 25,
          weekOrders: 180,
          monthOrders: 700,
          stock: 1200,
          returnRate: '1.5%'
        },
        {
          id: 2,
          name: '店铺 B',
          sales: '¥80,000',
          members: 120,
          todayOrders: 20,
          yesterdayOrders: 22,
          weekOrders: 150,
          monthOrders: 600,
          stock: 1000,
          returnRate: '1.2%'
        }
        // 更多店铺
      ],
      currentStoreDetails: {}
    };
  },
  methods: {
    viewDetails(store) {
      this.currentStoreDetails = { ...store };
      this.$refs.detailsPopup.open();
    },
    closePopup() {
      this.$refs.detailsPopup.close();
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
  background-color: #ecf0f1;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.system-name {
  font-size: 20px;
}

.store-stats-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.store-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  width: calc(50% - 20px); /* Two cards per row with a gap */
}

.store-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.store-name {
  font-size: 18px;
  font-weight: bold;
}

.store-buttons {
  display: flex;
  gap: 10px;
}

.store-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.stat-item {
  width: calc(50% - 10px); /* Two items per row with a gap */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-label {
  font-weight: bold;
}

.popup-container {
  width: 80%;
  max-width: 500px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h3 {
  margin-bottom: 20px;
  text-align: center;
  color: #333;
}

.form-row {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

label {
  width: 100px;
  color: #666;
  margin-right: 10px;
}

.button-group {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
</style>
